<!-- 新增/编辑 组织机构 -->
<template>
  <a-modal v-model:visible="visible" width="45vw" title="上传证件" unmount-on-close>
    <div class="upload-wrapper flex justify-center">
      <upload-img class="front-driver" title="驾驶证正页" v-model="form.driverFrontFileId" single margin />
      <upload-img class="reverse-driver" title="驾驶证副页" v-model="form.driverReverseFileId" single margin />
    </div>
    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { uploadDriverFile } from '@/api/market/member'
  import { Notification } from '@arco-design/web-vue'
  const visible = ref(false)
  const props = defineProps({
    autoUpload: {
      type: Boolean,
      default: true,
    },
  })
  const form = ref({})
  const emit = defineEmits(['ok'])
  const open = (memberId, driverFrontFileId, driverReverseFileId) => {
    form.value = {
      id: memberId,
    }
    visible.value = true
    driverFrontFileId && (form.value.driverFrontFileId = driverFrontFileId)
    driverReverseFileId && (form.value.driverReverseFileId = driverReverseFileId)
  }
  const okLoading = ref(false)
  const onCancel = () => {
    okLoading.value = false
    visible.value = false
  }
  const onConfirm = () => {
    if (props.autoUpload) {
      uploadDriverFile(form.value).then(() => {
        Notification.success({
          content: '保存成功',
          closable: true,
          duration: 3000,
        })
        emit('ok', form.value)
      })
    } else {
      emit('ok', form.value)
    }
    visible.value = false
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .upload-wrapper {
    padding-bottom: 18px;
    .front-driver {
      margin-right: 48px !important;
    }
    .reverse-driver {
      margin-right: 0 !important;
    }
  }
</style>
